<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>动态眼球示例</title>
    <style>
        body{
            width: 5000px;
            height: 10000px;
        }
        .animation1{
            border: 1px solid red;
            width: 1400px;
            height: 1000px;
            position: fixed;
            left: calc(50% - 700px);
            top: calc(50% - 500px);
            z-index: 999;
            background: #E3E3E3;
            transform: scale(0.33);
            cursor: pointer;

        }
        .face{/*
            border: 1px solid rgb(0, 255, 85);*/
            width: 100%;
            height: 100%;
            position: absolute;
            background: url(./images/face1.webp) no-repeat;
            background-size: 100% 100%;
            display: block;
            position: absolute;
            z-index: 20;
        }
        .eyes{/*
            border: 1px solid rgb(255, 0, 238);*/
            width: 245px;
            height: 67px;
            background: url(./images/tk.webp) no-repeat;
            background-size: 100% 100%;
            position: absolute;
            z-index: 10;

            
            top: 92px;/*84 103*/
            left: 924px;/*905 955*/
            transition: all 0.08s linear;
        }
    </style>
</head>
<body>
    <div class="animation1">
        <div class="face"></div>
        <div class="eyes" id="eyes"></div>
    </div>
    <script>
        //var t = document.getElementById("text");
        var eyes = document.getElementById("eyes");
        //var a = document.getElementById("a");
        
        
        window.onmousemove = function (event) {
            
            var event = event || window.event;  //标准化事件对象
            if (event.clientX || event.clientY) {
                //t.value = event.clientX + " " + event.clientY;
                //左半屏幕 
                var w = 230*0.3;
                var h = 420*0.3;
                var w1 = 92;
                var h1 = 924;
                //92 - 84 = 8
                if((event.clientX-w) <= (window.innerWidth*0.5) && (event.clientY+h) <=  (window.innerHeight*0.5)){
                    console.log("左上")
                    var l1 = 910 + 10*(event.clientX - w)/(window.innerWidth*0.5)
                    var L = l1+"px"
                    var t1 = 80 + 18*(event.clientY - w)/(window.innerHeight*0.5)
                    var T = t1+"px"
                    console.log(L)
                }else if((event.clientX-w) <= (window.innerWidth*0.5) && (event.clientY+h) >  (window.innerHeight*0.5)){
                    console.log("左下")
                    var l1 = 910 + 10*(event.clientX - w)/(window.innerWidth*0.5)
                    var L = l1+"px"
                    var t1 = 80 + 18*(event.clientY - w)/(window.innerHeight*0.5)
                    var T = t1+"px"
                    console.log(L)
                }else if((event.clientX-w) > (window.innerWidth*0.5) && (event.clientY+h) <=  (window.innerHeight*0.5)){
                    console.log("右上")
                    var l1 = 920 - 24*(window.innerWidth*0.5 - event.clientX - w)/(window.innerWidth*0.5)
                    var L = l1+"px"
                    var t1 = 80 + 18*(event.clientY - w)/(window.innerHeight*0.5)
                    var T = t1+"px"
                    console.log(L)
                }else if((event.clientX-w) > (window.innerWidth*0.5) && (event.clientY+h) >  (window.innerHeight*0.5)){
                    console.log("右下")
                    console.log("右上")
                    var l1 = 920 - 24*(window.innerWidth*0.5 - event.clientX - w)/(window.innerWidth*0.5)
                    var L = l1+"px"
                    var t1 = 80 + 18*(event.clientY - w)/(window.innerHeight*0.5)
                    var T = t1+"px"
                }
                eyes.style.left = L
                eyes.style.top =  T
            } //else if (event.clientX || event.clientY) {
                //t.value = (event.clientX - 1) + "" + (event.clientY - 1);
            //}
        }
    </script>
</body>
</html>
